<template>
  <div class="transaction-service-list container bg-c-fff right-height mb70">
    <p class="bread rel">
      <a href="#/index/transaction-package-list" class="font-s-16">交易监控套餐管理 </a> >
      <a href="javascript:void(0);" class="font-s-14">编辑套餐</a>
    </p>
    <div class="content">
      <form @submit.prevent="onSubmitClick">
        <ul class="auto">
          <li class="rel"><span>交易监控套餐名称：</span>
            <input type="text" class="input-css" v-model="name">
            <i class="iconfont icon-asterisk"></i>
          </li>
          <li class="rel"><span>交易次数：</span>
            <input type="number" class="input-css" v-model="num">次
            <i class="iconfont icon-asterisk"></i>
            <p>客户提交交易监控申请单成功，并多方确认后计1次</p>
          </li>
          <li class="rel"><span>交易有效期：</span>
            <input type="number" class="input-css" v-model="dueTi">天
            <i class="iconfont icon-asterisk"></i>
            <p>客户订单交易支付成功生效，当日计时为第1天</p>
          </li>
          <li class="rel"><span>服务收费金额：</span>
            <input type="number" class="input-css" v-model="charge">元
            <i class="iconfont icon-asterisk"></i>
          </li>
          <li class="rel"><span>服务编号：</span>
            <input type="bunmer" class="input-css" v-model="innerNo">
            <i class="iconfont icon-asterisk"></i>
          </li>
          <li class="rel"><span>备注：</span>
            <textarea v-model="remark" class="vt"></textarea>
          </li>
          <li class="btn-box">
            <button type="submit" class="blue-button xl-btn-css">确认</button>
            <button type="button" class="blue-button xl-btn-css" @click="cancelClick">取消</button>
          </li>
        </ul>
      </form>
    </div>
  </div>
</template>
<script type="text/javascript">
export default {
  data() {
    return {
      name: '',
      num: '',
      number: '',
      dueTi: '',
      dueTime: '',
      charge: '',
      innerNo: '',
      remark: ''
    }
  },
  mounted() {
    this.$http.get('/transactionMonitor/read/detail', {
      params: {
        id: this.$route.query.id
      }
    }).then(data => {
      if (data.data.httpCode === 200) {
        this.name = data.data.data.name
        if (data.data.data.number < 0) {
          this.num = ''
        } else {
          this.num = data.data.data.number
        }
        if (data.data.data.dueTime < 0) {
          this.dueTi = ''
        } else {
          this.dueTi = data.data.data.dueTime
        }
        this.charge = data.data.data.charge / 100
        this.innerNo = data.data.data.innerNo
        this.remark = data.data.data.remark
      } else {
        this.$toasted.show(data.data.msg)
      }
    }).catch(err => {
      console.log(err)
    })
  },
  methods: {
    onSubmitClick() {
      if (!this.name) {
        this.$toasted.show('套餐名称不能为空')
        return
      }
      if (!this.charge) {
        this.$toasted.show('收费金额不能为空')
        return
      }
      if (this.charge < 1) {
        this.$toasted.show('收费金额不能小于1')
        return
      }
      if (this.innerNo < 1) {
        this.$toasted.show('服务编号不能为空')
        return
      }
      if (this.num) {
        this.number = this.num
      } else {
        this.number = -1
      }
      if (this.dueTi) {
        this.dueTime = this.dueTi
      } else {
        this.dueTime = -1
      }
      this.$http.post('/transactionMonitor/update', {
        id: this.$route.query.id,
        name: this.name,
        number: this.number,
        dueTime: this.dueTime,
        charge: this.charge * 100,
        innerNo: this.innerNo,
        remark: this.remark
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.$toasted.show('修改成功！')
          this.$router.push('/index/transaction-package-list')
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    cancelClick() {
      this.$router.push('/index/transaction-package-list')
    }
  }
}

</script>
<style type="text/css" scoped>
.right-height {
  min-height: 800px;
}

.bread {
  padding-left: 20px;
  border-bottom: 1px solid #ddd;
}

.bread a {
  line-height: 45px;
}

ul {
  width: 518px;
  margin-top: 50px;
}

ul li {
  margin-bottom: 20px;
}

ul li input,
ul li textarea {
  width: 336px;
}

ul li textarea {
  height: 100px;
  padding: 5px 8px;
}

ul li span {
  width: 160px;
  text-align: right;
  display: inline-block;
}


ul li p {
  font-size: 12px;
  margin-left: 163px;
  line-height: 12px;
  color: #a5a5a5;
  margin-top: 5px;
}

ul li button {
  margin-left: 30px;
}

ul li.btn-box {
  margin-left: 132px;
}

.icon-asterisk {
  position: absolute;
  right: 21px;
  color: #ec5303;
  font-size: 25px;
  top: 5px;
}

</style>
